        .header {
            height: 115px;
            /* border: 1px solid #000; */
            position: fixed;
            left: 20px;
            right: 20px;
            top: 0;
            padding-top: 20px;
            background-color: #F3F4F7;
            z-index: 10;
        }
        .header .header-content {
            height: 75px;
            background-color: #fff;
            border-radius: 10px;
        }
        .sidebar-menu {
            width: 260px;
            position: fixed;
            top: 115px;
            bottom: 20px;
            left: 20px;
            background-color: #fff;
            border-radius: 10px;
        }
        .main {
            /* height: 1000px; */
            /* background-color: khaki; */
            margin: 115px 20px 20px 300px;
        }
        .main-part1 {
            /* min-height: 200px; */
            /* background-color: skyblue; */
            overflow: hidden;
        }
        .common-width {
            width: calc(100% + 20px);
            /* min-height: 100px; */
            /* border: 1px solid #000; */
        }
        .col {
            /* border: 1px solid #000; */
            padding-right: 20px;
            margin-bottom: 20px;
        }
        .col-content {
            /* min-height: 100px; */
            background-color: #fff;
            border-radius: 10px;
        }

        /* header start */
        .header-content {
            display: flex;
            align-items: center;
        }
        .header-content .logo {
            margin-left:32px;
            margin-right: 22px;
        }
        .header-content .menu ul {
            display: flex;
            align-items: center;
        }
        .header-content .menu ul li a {
            /* border: 1px solid blue; */
            padding: 15px 11px;
            display: block;
            color: #000;
            border-radius: 10px;
        }
        .header-content .menu ul li a:hover {
            background-color: #EFE8FF;
            color: #9C71FC;
        }
        .header-content .menu .icon-fenlei {
            font-size: 26px;
            color: #000;
            display: none;
        }
        /* end header */

        /* main-part1 start */
        .col .col-content {
            padding: 30px;
            height: 100%;
        }
        .common-title {
            font-size: 20px;
            color: #5B5B80;
            font-weight: 400;   
        }
        .main-part1 .text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .main-part1 .text .txt {
            font-weight: 400;
            font-size: 16px;
            color: #C5C5C5;
        }
        .main-part1 .text .num {
            font-weight: 400;
            font-size: 32px;
            /* color: #5B5B5B; */
        }
        .main-part1 .more {
            font-weight: 400;
            font-size: 16px;
            color: #9C71FC;

        }
        /* end main-part1 */

        /* main-part2 start */
        table.orders {
            width: 100%;
            margin-top: 23px;
            table-layout: fixed;
        }
        table.orders tr th,
        table.orders tr td {
            height: 56px;
            text-align: center;
        }
        table.orders tr td{
            border-bottom: 1px solid #B9B9B9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        table.orders tr td img {
            vertical-align: middle;
            margin-right: 10px;
            width: 30px;
        }
        table.orders tr th.width30 {
            width: 40%;
        }
        .hot-course ul li {
            display: flex;
            align-items: center;
            margin-bottom: 11px;
        }
        .hot-course ul {
            margin-top: 41px;
        }
        .hot-course ul li .iconfont {
            display: inline-block;
            font-size: 20px;
            padding: 15px;
            margin-right: 15px;
            border-radius: 10px;
            font-weight: 400;
        }
        .hot-course ul li:nth-child(1) .iconfont {
            background-color: #F0F2FF;
            color: #98A5FD;
        }
        .hot-course ul li:nth-child(2) .iconfont {
            background-color: #EFE8FF;
            color: #F59F62;
        }
        .hot-course ul li:nth-child(3) .iconfont {
            background-color: #E9F7E9;
            color: #8CC78C;
        }
        .hot-course ul li:nth-child(4) .iconfont {
            background-color: #F0F2FF;
            color: #98A5FD;
        }
        .hot-course ul li:nth-child(4) .iconfont {
            background-color: #F0F2FF;
            color: #98A5FD;
        }
        .hot-course ul li:nth-child(5) .iconfont {
            background-color: #F0F2FF;
            color: #98A5FD;
        }
        .hot-course ul li .info {
            display: flex;
            flex-direction: column;
            /* border: 1px solid #B9B9B9; */
            line-height: 1;

        }
        .hot-course ul li .title {
            font-weight: 400;
            margin-bottom: 8px;
        }
        .hot-course ul li .num {
            font-weight: 400;
            font-size: 14px;
            color: #B9B9B9;
        }
        /* end main-part2 */

        /* main-part3 start */
        .main-part3 .col-content .img-warp {
            background-color: rebeccapurple;
            margin-top: 23px;
            position: relative;
        }
        .main-part3 .col-content .img-warp img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .bl452-254 {
            padding-top: calc(254 / 452 *100%);
        }
        .main-part3 .common-box-list {
            margin-top: 20px;
        }
        .main-part3 .col-content .info {
            font-weight: 400;
            font-size: 16px;
            color: #5B5B5B;
            margin-top: 28px;
        }
        .row .col-item {
            /* border: 1px solid #E5E5E5; */
            padding-top: 50px;
        }
        .common-box .col-item a {
            display: flex;
            align-items: center;
        }
        .common-box .col-item .iconfont {
            font-size: 26px;
            padding: 7px;
            border-radius: 10px;
            margin-right: 15px;
        }
        .common-box .col-item:nth-child(1) .iconfont {
            color: #409EFF;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(2) .iconfont {
            color: #67C23A;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(3) .iconfont {
            color: #FF4949;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(4) .iconfont {
            color: #FFC107;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(5) .iconfont {
            color: #FFC107;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(6) .iconfont {
            color: #FF4949;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(7) .iconfont {
            color: #FF4949;
            background-color: #E4F5FF;
        }
        .common-box .col-item:nth-child(8) .iconfont {
            color: #FF4949;
            background-color: #E4F5FF;
        }   
        .common-box a {
            color: #5B5B5B;
        }
        /* end main-part3 */

        /* main-part4 start */
        .main-part4 .hot-course .num {
            color: #F77080;
        }

        .min400 {
            min-height: 400px;
        }

        .main-part4 .mychart {
            margin-top: 15px;
        }
        /* end main-part4 */

        /* sidebar start */
        .sidebar-menu {
            padding: 20px;
        }
        .menu-item {
            /* border: 1px solid #000; */
            margin-bottom: 10px;
            height: 40px;
            overflow: hidden;
            transition: height 0.3s ;
        }
        .menu-item .menu-item-title {
            height: 40px;
            /* background-color: khaki; */
            display: flex;
            align-items: center;
            background-image: url(./images/r-jiantou.png);
            background-position: 200px center;
            background-repeat: no-repeat;
            color: #000;
        }
        .menu-item .menu-item-title .iconfont {
            font-size: 16px;
            margin-left: 7px;
            margin-right: 12px;
            color: #000;
        }
        .menu-item ul {
            padding-top: 13px;
        }
        .menu-item ul li {
            height: 39px;
            /* border: 1px solid #000; */
            line-height: 39px;
            background-image: url(./images/dot-o.svg);
            background-position: 13px center;
            background-repeat: no-repeat;
            background-size: 20px 20px;
        }
        .menu-item ul li a {
            display: block;
            padding-left: 40px;
            color: #000;
        }
        /* 当前菜单激活 */
        .menu-item.active .menu-item-title {
            background-color: #F77080;
            color: #fff;
            background-image: url(./images/r-jiantou2.png);
        }
        .menu-item.active .menu-item-title .iconfont {
            color: #fff;
        }
        .sidebar-menu .close-button {
            display: none;
        }
        /* sidebar end */
